<template>
	<view class="register">
		<u-avatar v-show="false" :src="imgsrc"></u-avatar>
		<u-form label-position="left" :error-type="errorType" ref="uForm" :model="form">
			<!-- <u-form-item label="用户名:" label-width=135px; prop="userName">
				<u-input type="text" v-model="form.userName" placeholder="请输入用户名" />
			</u-form-item> -->
			<u-form-item label="昵称:" prop="name">
				<u-input type="text" v-model="form.name" placeholder="请输入昵称" />
			</u-form-item>
			<u-form-item label="密码:" prop="password">
				<u-input type="password" v-model="form.password" password="true" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="电话号码:" label-width=135px; prop="phone" maxlength="11">
				<u-input type="number" v-model="form.phone" placeholder="请输入电话号码" />
			</u-form-item>
			<u-form-item>
				<u-radio-group v-model="form.sex">
					<u-radio v-for="(item,index) in list" :key="index" :name="item.sex" :disabled="item.disabled">
						{{item.value}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="邮箱:" prop="email">
				<u-input type="email" v-model="form.email" placeholder="请输入邮箱" />
			</u-form-item>
			<u-button @tap="register">注册</u-button>
		</u-form>
		<view class="other">
			<navigator url="/pages/login/login">已有账户,点击登入</navigator>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				errorType: ['message'],
				imgsrc: '../../static/4068DBAD4FB786E27344EFA0866DC4AF.jpg',
				form: {
					// userName: '',
					name: '',
					password: '',
					phone: '',
					email: '',
					sex: '',
					
				},
                //这里写的是一些验证规则
				rules: {
					// userName: [{
					// 		max: 6,
					// 		message: '不能大于6',
					// 		trigger: 'change'
					// 	},
					// 	{
					// 		required: true,
					// 		message: '请输入用户名',
					// 		trigger: ['change', 'blur']
					// 	}
					// ],
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: ['change', 'blur']
					}],
					password: [{
							pattern: /^[a-zA-Z]\w{5,17}$/,  //正则表达式
							transform(value) {
								return String(value);
							},
							message: '以字母开头，长度在6~18之间，只能包含字母、数字和下划线',
							trigger: ['change', 'blur']
						},
						{
							min: 6,
							max: 18,
							message: '密码字数6-18之间',
							trigger: 'change'
						}, {
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur']
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['change', 'blur']
						},
						{
							max: 11,
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.phone(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}, {
							pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
							transform(value) {
								return String(value);
							},
							message: '手机号码输入不正确',
							trigger: ['change', 'blur']
						}
					],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: ['change', 'blur']
					}, {
						pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
						message: '邮箱格式不正确',
						trigger: ['change', 'blur']
					}],
				},
                //这个是设置radio
				list: [{
						value: '男',
						disabled: false,
						sex: 0
					},
					{
						value: '女',
						disabled: false,
						sex: 1
					}
 
				],
				radio: '',
				img: '../../static/4068DBAD4FB786E27344EFA0866DC4AF.jpg'
			}
		},
		mounted() {
			// this.register();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			register() {
				this.$refs.uForm.validate(valid => {
						if (valid) {
							console.log('验证通过');
						} else {
							console.log('验证失败');
						}
					}),
					uni.showLoading({
						title: '加载中..'
					})
				uni.request({
					url: 'https://eggblog.bluej.cn/api/user/register',  //写接口的
					data: {    
						userName: this.form.userName,
						name: this.form.name,
						password: this.form.password,
						phone: this.form.phone,
						sex: this.form.sex,
						email: this.form.email,
						avatar:this.imgsrc,
						projectId: "209", 
					},
					method: "POST",
					success: res => {
						if (res.data.code == 200) {  //注册成功就执行下面这些代码
							uni.hideLoading();
							console.log(this.imgsrc);
							//this.login(res.data);
							uni.showToast({          //显示注册成功
								title: '注册成功',
								mask: true,
								duration: 1500
							})
							setTimeout(() => {
								uni.navigateTo({     //注册成功跳转登录页面
									url: '/pages/login/login',
								}, 3000);
							})
						} else {
							uni.showToast({ 
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.other {
		margin-top: 2vh;
		color: #6f6f6f;
		text-align: center;
	}
</style>
